<template>
  <page-view class="search-food-page">
    <page-header title="搜索" :show-back="true"></page-header>
    <div class="content-box">
      <div class="query-box">
        <input
          type="text"
          v-model="keyword"
          placeholder="请输入菜品名称"
          ref="inputEle"
          class="query-text"
        />
        <button @click="getFoodByName()" class="query-btn">搜索</button>
      </div>
    </div>

    <!-- 查出来的菜品展示也用了List第三方组件和foodItem组件 -->
    <!-- 为什么这里不加 v-if 下面懒加载的loading状态为啥一直处于true状态？不是一上来就是fasle吗？ -->
    <div class="search-result-box" v-if="foodList.length > 0">
      <list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <food-item
          v-for="(item, index) in foodList"
          :key="index"
          :f_item="item"
        ></food-item>
      </list>
    </div>
  </page-view>
</template>

<script>
import { ref, reactive, getCurrentInstance, onMounted, toRefs } from "vue";
import { Toast, List } from "vant"; //从众多组件中引入解构出我们需要的组件
import FoodItem from "../components/FoodItem.vue";
import Api from "../utils/api"; //这里是默认抛出，不需要解构
export default {
  name: "SearchFood",
  components: { List, FoodItem },
  setup() {
    const { proxy } = getCurrentInstance();
    let keyword = ref("");
    let inputEle = ref(null);

    //是否显示加载状态
    const loading = ref(false);
    //是否加载完成
    const finished = ref(false);
    //食物数据
    const foodData = reactive({
      pageCount: 0,
      pageEnd: 0,
      pageIndex: 1,
      pageStart: 1,
      totalCount: 0,
      foodList: [],
    });

    //1.搜集数据通过 菜品名称模糊搜索
    const getFoodByName = async (pageIndex = 1) => {
      //当搜索结果为空的时候当前组件调用情提示Toast弹窗
      if (keyword.value.trim() === "") return Toast.fail("输入不能为空");
      //这里为什么要这样做呢？？？？？
      //如果页码等于1，清空食物数组
      if(pageIndex===1) foodData.foodList.length=0;

      // 获取数据前修改loading
      loading.value = true;
      let results = await Api.foodInfo.getListByPage({
        pageIndex: pageIndex,
        food_name: keyword.value,
      });
      console.log(results);
      //拿到数据并解构并做响应式数据：
      foodData.pageCount = results.pageCount;
      foodData.pageEnd = results.pageEnd;
      foodData.pageIndex = +results.pageIndex;
      foodData.pageStart = results.pageStart;
      foodData.totalCount = results.totalCount;
      //也要处理图片的网络地址
      results.listData.map(
        (item) => (item.food_img = proxy.BaseURL + item.food_img)
      );
      foodData.foodList.push(...results.listData);
      //获取完数据后再改回来loading，并且再判断是否加载完了
      loading.value = false;
      finished.value = foodData.pageIndex >= foodData.pageCount;
    };

    //下滚懒加载菜单
    const onLoad = () => {
      //每次下滚都要根据条件去重新获取数据
      if (foodData.pageIndex < foodData.pageCount) {
        getFoodByName(foodData.pageIndex + 1);
      }
    };

    onMounted(() => {
      keyword.value = "";
      proxy.$refs.inputEle.focus();
    });

    return {
      keyword,
      inputEle,
      getFoodByName,
      onMounted,
      onLoad,
      loading,
      finished,
      ...toRefs(foodData),
    };
  },
};
</script>

<style lang="scss" scoped>
.search-food-page {
//   @include flexbox(column);
  .content-box {
    flex: 1;
    overflow: auto;
    .query-box {
      width: 80%;
      margin: 10px auto;
      display: flex;
      height: 30px;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0px 5px 10px lightgray;
      .query-text {
        flex: 1;
        border: none;
        box-sizing: border-box;
        padding: 0px 10px;
        outline: none;
        background-color: rgba($color: #ffffff, $alpha: 0.5);
      }
      .query-btn {
        width: 45px;
        font-size: 14px;
        border: none;
        outline: none;
        background-color: rgba($color: #888888, $alpha: 0.5);
        color: white;
      }
    }
  }
}
</style>